<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字练习</title>
</head>
<body>
<div>
    <h1>猜数字小游戏</h1>
    <input type="text" placeholder="请输入一个0-100的整数"v-model="num">
    <input type="button" value="猜一下" @click="guessOne()">
    <input type="button" value="充值六元获得十次机会" v-on:click="subCount+=6">
    <h3>结果: {{info}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
    let v=new Vue({
        el:"div",
        data:{
            num:"",
            guess:parseInt(Math.random()*101+""),
            count:0,
            subCount:9,
            info:"请猜一次试试",
        },
        methods:{
            guessOne(){
                if (v.subCount==0){
                    v.info="你没有机会了,请充值次数"
                    return;
                }
                v.count++;
                v.subCount--;
                if (v.num<v.guess){
                    v.info="猜小了,你猜了"+v.count+"次" +
                        ",还剩"+v.subCount+"次机会";
                }else if (v.num>v.guess){
                    v.info="猜大了,你猜了"+v.count+"次" +
                        ",还剩"+v.subCount+"次机会";
                }else {
                    v.info="恭喜你,猜中了,你猜了"+v.count+"次" +
                        ",还剩"+v.subCount+"次机会";
                    v.guess=parseInt(Math.random()*101+"");
                    v.count=0;
                    v.subCount=6;
                }

            }
        }
    })
</script>
</body>
</html>